<template>
  <transition 
    name="dialog-fade" 
    @after-enter="afterEnter" 
    @after-leave="afterLeave">
    <div 
      v-show="visible" 
      class="ex-dialog__wrapper" 
      @click.self="handleWrapperClick">
      <div ref="dialog" class="ex-dialog" :style="style">
        <div class="ex-dialog__header">
          <slot name="title" v-if="title">
            <h3 class="ex-dialog__title">{{ title }}</h3>
            <div class="ex-dialog__headerbtn" @click="handleClose">
              <IconConfigProvider color="rgb(142,27,18)" size="10">
                <Icon>
                  <CloseFilled />
                </Icon>
              </IconConfigProvider>
            </div>
          </slot>
          <slot name="title" v-else></slot>
        </div>
        <div class="ex-dialog__body">
          <slot></slot>
        </div>
        <div class="ex-dialog__footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Popup from "../../../utils/popup"
import emitter from "../../../mixins/emitter"
import Migrating from '../../../mixins/migrating';
import { CloseFilled } from "@v2icons/material"
import { Icon, IconConfigProvider } from "@v2icons/utils"

export default {
  name: "ExDialog",
  mixins: [Popup, emitter, Migrating],
  components: {
    CloseFilled,
    Icon,
    IconConfigProvider
  },
  props: {
    title: {
      type: String,
      default: ""
    },

    modal: {
      type: Boolean,
      default: true
    },

    modalAppendToBody: {
      type: Boolean,
      default: true
    },

    appendToBody: {
      type: Boolean,
      default: false
    },

    lockScroll: {
      type: Boolean,
      default: true
    },

    closeOnClickModal: {
      type: Boolean,
      default: true
    },

    closeOnPressEscape: {
      type: Boolean,
      default: true
    },

    showClose: {
      type: Boolean,
      default: true
    },

    width: String,

    fullscreen: Boolean,

    customClass: {
      type: String,
      default: ""
    },

    top: {
      type: String,
      default: "15vh"
    },
    beforeClose: Function,
    center: {
      type: Boolean,
      default: false
    },

    destroyOnClose: Boolean
  },

  data() {
    return {
      closed: false,
      key: 0
    }
  },

  watch: {
    visible(val) {
      if (val) {
        this.closed = false
        this.$emit("open")
        this.$el.addEventListener("scroll", this.updatePopper)
        this.$nextTick(() => {
          this.$refs.dialog.scrollTop = 0
        })
        if (this.appendToBody) {
          document.body.appendChild(this.$el)
        }
      } else {
        this.$el.removeEventListener("scroll", this.updatePopper)
        if (!this.closed) this.$emit("close")
        if (this.destroyOnClose) {
          this.$nextTick(() => {
            this.key++
          })
        }
      }
    }
  },

  computed: {
    style() {
      let style = {}
      if (!this.fullscreen) {
        style.marginTop = this.top
        if (this.width) {
          style.width = this.width
        }
      }
      return style
    }
  },
  methods: {
    getMigratingConfig() {
      return {
        props: {
          size: "size is removed."
        }
      }
    },
    handleWrapperClick() {
      if (!this.closeOnClickModal) return
      this.handleClose()
    },
    handleClose() {
      if (typeof this.beforeClose === "function") {
        this.beforeClose(this.hide)
      } else {
        this.hide()
      }
    },
    hide(cancel) {
      if (cancel !== false) {
        this.$emit("update:visible", false)
        this.$emit("close")
        this.closed = true
      }
    },
    updatePopper() {
      this.broadcast("ElSelectDropdown", "updatePopper")
      this.broadcast("ElDropdownMenu", "updatePopper")
    },
    afterEnter() {
      this.$emit("opened")
    },
    afterLeave() {
      this.$emit("closed")
    }
  },

  mounted() {
    if (this.visible) {
      this.rendered = true
      this.open()
      if (this.appendToBody) {
        document.body.appendChild(this.$el)
      }
    }
  },

  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  }
}
</script>
